<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <div>
    <table id="datagrid"></table>
  </div>
  <script type="text/javascript">
    $(function () {
      $("#datagrid").datagrid({
        //添加一个当前指定样式到面板
        style: {
          margin: 'auto'
        },
        url : 'data.json',
        //顶部工具栏的DataGrid面板。可能的值：一个数组，每个工具属性都和linkbutton一样；选择器指定的工具栏
        toolbar : [ {
          iconCls : 'icon-large-picture',
          text : '图片',
          handler : function () {
            console.log("图片");
          }
        }, '-', {
          text : '剪贴画',
          iconCls : 'icon-large-clipart',
          handler : function () {
            console.log("剪贴画")
          }
        }, '-', {
          text : '图形',
          iconCls : 'icon-large-shapes',
          handler : function () {
            console.log("图形")
          }
        }, '-', {
          text : '智能图表',
          iconCls : 'icon-large-smartart',
          handler : function () {
            console.log("智能图表")
          }
        }, '-', {
          text : '图表',
          iconCls : 'icon-large-chart',
          handler : function () {
            console.log("图表")
          }
        } ],
        //在请求远程数据的时候发送额外的参数。默认值为{}
        //这个方法会被datagrid的load方法取代：$(this).datagrid('load', {})
        /* queryParams : {
          //name: 'value',
          //...
        }, */
        //返回过滤后的数据；返回的标准数据对象须包含total和rows属性，否则只展示一页的数据。唯一参数表示源数据，比如json对象
        loadFilter: function (data) {
          console.log(data);
          //返回过滤后的数据
          return data.records;
        },
        //一次性排序的列的名称
        sortName : 'identifier',
        //列的一次性排序顺序，只能是'asc'或'desc'
        sortOrder : 'asc',
        //自动展开/收缩列的大小以适应网格的宽度，默认值为false
        //fitColumns: true,
        //是否从服务器对数据进行排序，默认值为true
        remoteSort : false,
        //是否显示斑马线效果，默认值为false
        striped : true,
        //是否在同一行中显示数据，设置为true可以提高加载性能。默认值为true
        //nowrap: false,
        //从远程站点加载数据的时候显示提示消息，默认值为“Processing, please wait …”
        loadMsg : '正在处理，请稍候...',
        //只允许选择一行，默认值为false
        singleSelect : true,
        //datagrid（数据网格）列的配置对象
        columns : [ [ {
          //列字段名称
          field : 'identifier',
          //列标题文本
          title : '编号',
          //是否可以被排序，须由用户点击列名执行排序
          sortable : true,
          //默认排序顺序，只能是'asc'或'desc'
          order : 'asc',
          //如何对齐列数据。可以使用的值有：'left'，'right'，'center'
          align : 'right'
        }, {
          field : 'userName',
          title : '用户名',
          //如何对齐列标题。可以使用的值有：'left'，'right'，'center'。如果没有指定，则按照align属性进行对齐
          halign : 'center',
          //列的宽度。如果没有定义，宽度将自动扩充以适应其内容
          width : 200
        }, {
          field : 'email',
          title : '邮件地址',
          //是否在"fitColumns"设置为true时阻止其自适应宽度
          fixed : true,
          //单元格格式化器
          /* formatter : function (value, row, index) {
            //替换邮件地址中的“@”为“#”
            value = value.replace('@', '#');
            return value;
          } */
        }, {
          field : 'registrationTime',
          title : '注册时间',
          styler : function (value, row, index) {
            if (value.indexOf("201") > -1) {
              return 'background-color: #ffee00; color: red';
            }
          }
        } ] ],
        width : 616,
        //加载数据，类型为数组或json对象。注意，它可能会被请求响应的数据覆盖
        data : {
          "records": [
            {
              "identifier" : 7,
              "userName" : "delta",
              "email" : "delta@sohu.com",
              "registrationTime" : "2006/12/19"
            }
          ]
        },
        //是否在底部显示分页工具栏，默认值为false
        pagination : true,
        //标识字段
        idField : 'identifier',
        pageSize : 10,
        pageList : [ 10, 20, 30, 40 ],
        //显示一个行号列，默认值为false
        rownumbers : true,
      })
    })
  </script>
</body>
</html>